﻿<!DOCTYPE
    html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

    <title></title>

    <meta name="rajonUseResources" content="res, order" />
    <meta name="rajonLocale" content="client" />

    <script type="text/javascript" src="js/jquery-1.5.min.js" ></script>
    <script type="text/javascript" src="js/Rajon.js"></script>        
    <script type="text/javascript" src="ViewModel/Order.js"></script>    

    <script type="text/javascript" src="js/updateFunc.js"></script>
    
    <link href="css/style.css" rel="stylesheet" type="text/css" />

    
      <script language="javascript">

          var newItem = null;

          function add() {

              newItem = new RajonViewModel({
                  Product: document.getElementById('newProduct').value,
                  Quantity: document.getElementById('newQuantity').value,
                  ItemPrice: Rajon.toFloat(document.getElementById('newPrice').value)
              });


              newItem.addToModelSource({ datacontext: 'OrderService/Orders/{request.OrderNumber}/Items', onModelAdded: afterAdd });
          }


        function afterAdd(itemNumber) {

            newItem.model.ItemNumber = itemNumber;

            var itemVM = Rajon.vmodel('items').addItemViewModel(newItem.model);
            itemVM.bind();

            // clear fields            
            document.getElementById('newProduct').value = '';
            document.getElementById('newQuantity').value = '1';
            document.getElementById('newPrice').value = '0';
            document.getElementById('newProduct').focus();
        }

        function deleteItem(tag) {
                var itemVm = Rajon.getParentViewModel(tag);
                itemVm.deleteFromModelSource({ modelSrc: 'OrderService/Orders/{request.OrderNumber}/Items/' + itemVm.model.ItemNumber });
        }

    </script>
    
</head>
<body>

    <!-- HEADER -->
    <div id="detail" rajon:datacontext="OrderService/Orders/{request.OrderNumber}" rajon:vModelClass="Order" >

        <label>OrderNumber:</label>
        <span rajon:bind="model.OrderNumber#i"></span><br />

        <label>Client: </label>
        <input id="clientName" type="text" rajon:bind="model.ClientName" rajon:commitOnLostFocus="true" />
        <span class="errorDisplay" rajon:displayCommitErrorFor="clientName"></span><br />                    

        <label>Delivery Date:</label>
        <input id="deliveryDate" type="text" rajon:bind="model.DeliveryDate#d" rajon:commitOnLostFocus="true"/>
        <span class="errorDisplay" rajon:displayCommitErrorFor="deliveryDate"></span><br />  
        
        <a id="editLink" href="javascript: editDetail()">Edit</a>
        <a id="saveLink" href="javascript: saveDetail()">Save</a>                  

    </div>
    
    <!-- ADD ITEM -->
    <div id="addItem">
    Add item <input type="text" id="newProduct" class="EditIsOn" onkeydown="if (event.keyCode == 13) document.getElementById('addButton').click()"/>,
    quantity <input type="text" id="newQuantity" class="EditIsOn" size="3" value="1" onkeydown="if (event.keyCode == 13) document.getElementById('addButton').click()"/>, 
    price <input type="text" id="newPrice" size="8" class="EditIsOn" value="0" onkeydown="if (event.keyCode == 13) document.getElementById('addButton').click()"/>
    <input id="addButton" type="button" value="add" onclick="add()" />
    </div>
    

    <!-- ITEMS -->
    <table style="width:100%">
        <thead>
        <tr>
            <td style="width: 10%; text-align:right">#</td>
            <td style="width: 35%">Product</td>
            <td style="width: 25%; text-align:right">Quantity</td>        
            <td  style="width: 25%;  text-align:right">Price</td>            
            <td  style="width: 5%;"></td>            
        </tr>
        </thead>
        <tbody id="items" rajon:datacontext=">detail.model.Items">
            
              <tr rajon:isitemview="true">
                <td style="text-align:right"><span rajon:bind="model.ItemNumber#i"></span></td>
                <td><span rajon:bind="model.Product"></span></td>
                <td style="text-align:right"><span rajon:bind="model.Quantity#i"></span></td>            
                <td style="text-align:right"><span rajon:bind="model.ItemPrice"></span></td>            
                <td style="text-align:center"><a onclick="javascript: deleteItem(this)" href="#">remove</a></td>            
              </tr>
            
        </tbody>
        
    </table>
    
    
    

</body>

</html>
